<template>
	<div class="workflow-props-wrapper">
		<div class="workflow-props-blank" :style="[{height: (propsData.length*24)+ 'px'}]">
			&nbsp;
		</div>
		<div class="workflow-props-body" :style="[{'left':left+'px'}]">
			<div class="workflow-props" v-for="(item,index) in propsData">
				<div class="workflow-props-text">{{item}}</div>
				<div class="workflow-point">
					&nbsp;
				</div>
				<svg class="canvas-handle-plus-wrapper source" viewBox="0 0 70 24" data-plus-type="default"
					style="width: 79px; height: 24px;">
					<line class="source" x1="10" y1="12" x2="40" y2="12" stroke="rgb(126, 129, 134)" stroke-width="2">
					</line>
					<g @click.stop="handleAdd" class="source clickable canvas-handle-plus" transform="translate(40, 0)">
						<rect class="source clickable" x="2" y="2" width="20" height="20" stroke="rgb(126, 129, 134)"
							stroke-width="2" rx="4" fill="rgb(255, 255, 255)"></rect>
						<path class="source clickable" fill="rgb(126, 129, 134)"
							d="m16.40655,10.89837l-3.30491,0l0,-3.30491c0,-0.40555 -0.32889,-0.73443 -0.73443,-0.73443l-0.73443,0c-0.40554,0 -0.73442,0.32888 -0.73442,0.73443l0,3.30491l-3.30491,0c-0.40555,0 -0.73443,0.32888 -0.73443,0.73442l0,0.73443c0,0.40554 0.32888,0.73443 0.73443,0.73443l3.30491,0l0,3.30491c0,0.40554 0.32888,0.73442 0.73442,0.73442l0.73443,0c0.40554,0 0.73443,-0.32888 0.73443,-0.73442l0,-3.30491l3.30491,0c0.40554,0 0.73442,-0.32889 0.73442,-0.73443l0,-0.73443c0,-0.40554 -0.32888,-0.73442 -0.73442,-0.73442z">
						</path>
					</g>
				</svg>
			</div>
		</div>

	</div>
</template>

<script>
	export default {
		inject: ['select'],
		props: {
			modelValue: {
				type: Object,
				default: () => {}
			}
		},
		props: {
			left: {
				type: Number,
				default: 0
			},
			top: {
				type: Number,
				default: 10
			}
		},
		components: {

		},
		data() {
			return {
				nodeConfig: {},
				propsData: ['模型', '工具']
			}
		},
		watch: {
			modelValue() {
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.nodeConfig = this.modelValue
		},
		methods: {
			handleAdd() {

			}
		}
	}
</script>

<style scoped>
	.workflow-props-wrapper {
		position: relative;
	}

	.workflow-props-blank {
		min-width: 50px;
	}

	.workflow-props {
		color: #2f3a65;
		font-weight: bold;
		right: -45px;
		width: 100px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.workflow-props-body {
		top: 0px;
		position: absolute;
		color: #2f3a65;
		font-weight: bold;
		width: 100px;
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
	}

	.workflow-point {
		width: 10px;
		height: 10px;
		background: #9197f1;
		border-radius: 50%;
		left: 50px;
		position: absolute;
		transform: scale(0.8);
	}

	.workflow-props-text {
		font-size: 12px;
		line-height: 17px;
		height: 17px;
		color: rgb(126, 129, 134);
		background: transparent;
		z-index: 1;
		text-align: right;
		max-width: calc(100% - 22px - 24px);
		min-width: 50px;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;

	}

	.clickable {
		pointer-events: all;
		cursor: pointer;
	}

	.canvas-handle-plus:hover rect {
		stroke: #f76d54;
	}

	.canvas-handle-plus:hover path {
		fill: #f76d54;
	}

	.workflow-props:hover .workflow-point {
		background: rgb(77, 83, 232) !important;
		transition: all .2s linear 0s !important;
		transform: scale(1) !important;
		z-index: 999;
	}

	.canvas-handle-plus-wrapper {}
</style>
